<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/head::head('banner管理')">

<body class="gray-bg">
<style>
    table th {
        text-align: center !important;
    }
</style>
<div class="wrapper wrapper-content  animated fadeInRight">
    <form role="form" id="searchForm" class="search-panel" method="get">
        <input type="hidden" th:value="${pageIndex}" name="pageIndex"/>
    </form>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>广告列表</h5>
                    <div class="ibox-tools">
                        <a data-toggle="modal" onclick="jsHelper.edit(0)">
                            <i class="fa fa-plus"></i>
                            添加广告
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered table-hover table-center">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>标题</th>
                            <th>图片</th>
                            <th style="width: 120px">创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="table-content">
                        <tr th:each="banner:${banners}">
                            <td th:text="${banner.id}"></td>
                            <td th:text="${banner.title}"></td>
                            <td>
                                <a><img th:src="${banner.url}"
                                        style="width: 100px;height: 80px;"></a>
                            </td>
                            <td th:text="${#temporals.format(banner.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                            <td>
                                <a type="button" class="btn-a" data-toggle="modal"
                                   th:onclick="jsHelper.edit([[${banner.id}]])">修改</a>
                                <a type="button" class="btn-a" data-toggle="modal"
                                   th:onclick="jsHelper.delete([[${banner.id}]])">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--分页控件-->
                    <p style="float: left; margin: 20px 0;">
                        共<span th:text="${totalRecords}"></span>条记录，当前第<span th:text="${pageIndex}"></span>/<span
                            th:text="${totalPages==0?1:totalPages}"></span>，每页20条记录
                    </p>
                    <ul style="float: right;" class="pagination pagination-split">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<footer th:include="common/footer::js"/>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js}"></script>
<script>
    const pageIndex = /*[[${pageIndex}]]*/  1;
    const totalPages = /*[[${totalPages}]]*/  0;
    //初始化分页
    var pageinate = new hot.paging(".pagination", pageIndex, totalPages, 7);

    pageinate.init(function (p) {
        $("input[name=pageIndex]").val(pageIndex);
        $("#searchForm").submit();
    });

    var jsHelper = {
        edit: function (dataId) {
            if (dataId > 0)
                hotUtil.newTab("/banner/edit?id=" + dataId, "编辑banner_" + dataId);
            else
                hotUtil.newTab("/banner/edit?id=0", "添加banner");
        },
        delete: function (dataId) {
            var self = this;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                hotUtil.loading.show();
                hotUtil.ajaxCall("/banner/deleteById", {
                    id: dataId
                }, function (ret) {
                    hotUtil.loading.close();
                    if (ret.resultCode === 2000) {
                        self.init();
                        swal("删除成功！", "您已经永久删除了这条信息。", "success");
                    }
                    else {
                        swal("删除失败！", ret.resultMsg, "error");
                    }
                });
            });
        },
    }
</script>
</body>

</html>